<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>  </title>
    <style>
/* .p{
    width: 100px;
    height: 100px;
    background-color: pink;
    text-align: center;
}
.box2{
    position: relative;
    left: 200px;
    top: -100px;
    
}

.box3{
    position: relative;
    left: 100px;
    top: -100px;
    
}

.box4{ 
    position: relative;
    left: 0;
    top: -100px;
    
}

.box5{
    position: relative;
    left: 200px;
    top: -200px;
    
} */

.box{
    border: 1px solid red;
    width: 300px;
    height: 300px;
    padding: 10px;
    /* display: inline-block; */
}

.box a{
    background-color: deeppink;
    display: block;
    width: 100px;
    height: 100px;
    text-decoration: none;
    text-align: center;
    line-height: 100px;
}

.box a:nth-child(even){
    position:relative;
    top: -100px;
    left:200px
}
.box a:last-child{
    position: relative;
    top: -300px;
    left:100px;
    background-color: deepskyblue;
}
    </style>
</head>
<body>
    <!-- <div class="p box1"><a href="#">链接1</a></div>
    <div class="p box2"><a href="#">链接2</a></div>
    <div class="p box3"><a href="#">链接3</a></div>
    <div class="p box4"><a href="#">链接4</a></div>
    <div class="p box5"><a href="#">链接5</a></div> -->

    <div class="box">
        <a href="">链接1</a>
        <a href="">链接2</a>
        <a href="">链接3</a>
        <a href="">链接4</a>
        <a href="">链接5</a>
    </div>
</body>
</html>